<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>IDF Size Analyser</title>
  </head>

  <body>
    <div id="app">
      <header class="section">
        <div class="container">
          <nav class="level is-mobile">
            <div class="level-left">
              <div class="level-item">
                <h1 class="title is-size-5-mobile" v-html="title"></h1>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                <p class="buttons are-small">
                  <button
                    class="button"
                    title="Flash"
                    v-on:click="flashClicked"
                    v-bind:disabled="isFlashing"
                  >
                    <span class="icon">
                      <iconify-icon icon="symbol-event" />
                    </span>
                    &nbsp; Flash
                  </button>
                  <button
                    class="button"
                    title="Retry"
                    v-on:click="retryClicked"
                  >
                    <span class="icon">
                      <iconify-icon icon="refresh" />
                    </span>
                  </button>
                </p>
              </div>
            </div>
          </nav>
          <p class="subtitle is-size-6-mobile">
            {{subtitle}}
          </p>
        </div>
      </header>
      <div class="section no-padding-top">
        <div class="container is-mobile">
          <!-- Filter -->
          <nav class="level is-mobile">
            <div class="level-left"></div>
            <div class="level-right">
              <div class="field has-addons">
                <p class="control">
                  <button
                    class="button is-size-7-mobile is-size-7-tablet"
                    v-on:click="toggleOverviewAndDetails"
                    v-bind:class="{'is-static' : isOverviewEnabled}"
                  >
                    Overview
                  </button>
                </p>
                <p class="control">
                  <button
                    class="button is-size-7-mobile is-size-7-tablet"
                    v-on:click="toggleOverviewAndDetails"
                    v-bind:class="{'is-static' : !isOverviewEnabled}"
                  >
                    Detailed
                  </button>
                </p>
              </div>
            </div>
          </nav>
          <!-- End of Filter -->
          <div v-if="isOverviewEnabled">
            <!-- Overview View -->
            <!-- .Sections & Other Data -->
            <div class="notification is-clipped">
              <nav class="level is-mobile">
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading is-size-7-mobile">.data</p>
                    <p class="title is-size-5-mobile">
                      {{convertToKB(overviewData.dram_data)}}KB
                    </p>
                  </div>
                </div>
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading is-size-7-mobile">.bss</p>
                    <p class="title is-size-5-mobile">
                      {{convertToKB(overviewData.dram_bss)}}KB
                    </p>
                  </div>
                </div>
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading is-size-7-mobile">Total</p>
                    <p class="title is-size-5-mobile">
                      {{convertToKB(overviewData.total_size)}}KB
                    </p>
                  </div>
                </div>
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading is-size-7-mobile">Flash Code</p>
                    <p class="title is-size-5-mobile">
                      {{convertToKB(overviewData.flash_code)}}KB
                    </p>
                  </div>
                </div>
                <div class="level-item has-text-centered">
                  <div>
                    <p class="heading is-size-7-mobile">Flash Rodata</p>
                    <p class="title is-size-5-mobile">
                      {{convertToKB(overviewData.flash_rodata)}}KB
                    </p>
                  </div>
                </div>
              </nav>
            </div>
            <!-- End of .Sections and other Data -->

            <!-- Progress Bar Zone -->
            <div class="notification is-clipped">
              <div class="columns is-vcentered has-text-centered is-mobile">
                <div class="column is-1-tablet is-2-mobile is-clipped">
                  <div>
                    <span class="icon is-large is-hidden-mobile">
                      <iconify-icon icon="server" class="is-size-3" />
                    </span>
                    <strong style="vertical-align: super;">DRAM</strong>
                  </div>
                </div>
                <div class="column">
                  <progress
                    class="progress"
                    v-bind:class="progressBarColorClass(overviewData.used_dram_ratio)"
                    v-bind:title="Math.round(overviewData.used_dram_ratio*100)+'%'"
                    v-bind:value="overviewData.used_dram"
                    v-bind:max="overviewData.used_dram + overviewData.available_dram"
                  ></progress>
                </div>
                <div
                  class="column is-3-mobile is-2-tablet is-2-desktop is-size-7-tablet is-size-7-mobile"
                >
                  {{convertToKB(overviewData.used_dram)}}KB /
                  {{convertToKB(overviewData.used_dram +
                  overviewData.available_dram)}}KB
                </div>
              </div>
            </div>
            <div class="notification is-clipped">
              <div class="columns is-vcentered has-text-centered is-mobile">
                <div class="column is-1-tablet is-2-mobile is-clipped">
                  <div>
                    <span class="icon is-large is-hidden-mobile">
                      <iconify-icon icon="screen-normal" class="is-size-3" />
                    </span>
                    <strong style="vertical-align: super;">IRAM</strong>
                  </div>
                </div>
                <div class="column">
                  <progress
                    class="progress"
                    v-bind:class="progressBarColorClass(overviewData.used_iram_ratio)"
                    v-bind:title="Math.round(overviewData.used_iram_ratio*100)+'%'"
                    v-bind:value="overviewData.used_iram"
                    v-bind:max="overviewData.used_iram + overviewData.available_iram"
                  ></progress>
                </div>
                <div
                  class="column is-3-mobile is-2-tablet is-2-desktop is-size-7-tablet is-size-7-mobile"
                >
                  {{convertToKB(overviewData.used_iram)}}KB /
                  {{convertToKB(overviewData.used_iram +
                  overviewData.available_iram)}}KB
                </div>
              </div>
            </div>
            <!-- End of Progress Bar Zone -->
            <!-- End of Overview View -->
          </div>
          <!-- Detailed View -->
          <div v-else>
            <!-- Search Filter -->
            <div class="field">
              <p class="control has-icons-right">
                <input
                  class="input"
                  type="text"
                  placeholder="Search"
                  v-model="searchText"
                />
                <span class="icon is-right">
                  <iconify-icon icon="search" />
                </span>
              </p>
            </div>
            <!-- End of Search Filter -->
            <div
              v-for="(archiveInfo, archiveName) in filteredArchives"
              class="notification is-clipped"
            >
              <div
                class="columns is-vcentered has-text-right is-mobile"
                v-on:click="toggleArchiveFileInfoTable(archiveName)"
              >
                <div class="column is-hidden-mobile">
                  <div class="control">
                    <span class="icon is-large">
                      <iconify-icon icon="file-zip" class="is-size-4" />
                    </span>
                  </div>
                </div>
                <div class="column is-3 is-clipped">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop has-text-weight-medium"
                  >
                    {{archiveName}}
                  </p>
                </div>
                <div class="column">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.data)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">.data</p>
                </div>
                <div class="column">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.bss)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">.bss</p>
                </div>
                <div class="column">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.iram)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">iram</p>
                </div>
                <div class="column">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.flash_text)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">code</p>
                </div>
                <div class="column">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.flash_rodata)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">rodata</p>
                </div>
                <div class="column is-hidden-mobile">
                  <p
                    class="is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    {{convertToKB(archiveInfo.total)}}<span
                      class="has-text-weight-light is-uppercase"
                      >kb</span
                    >
                  </p>
                  <p class="heading">total</p>
                </div>
                <div v-if="archiveInfo.files" class="column">
                  <div v-if="!archiveInfo.isFileInfoVisible">
                    <span class="icon is-large is-hidden-mobile">
                      <iconify-icon icon="chevron-down" />
                    </span>
                    <span class="icon is-small is-hidden-tablet">
                      <iconify-icon icon="chevron-down" />
                    </span>
                  </div>
                  <div v-else>
                    <span class="icon is-large is-hidden-mobile">
                      <iconify-icon icon="chevron-up" />
                    </span>
                    <span class="icon is-small is-hidden-tablet">
                      <iconify-icon icon="chevron-up" />
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="columns"
                style="overflow: auto;"
                v-if="archiveInfo.files && archiveInfo.isFileInfoVisible"
              >
                <div class="column">
                  <table
                    class="table is-fullwidth is-hoverable is-size-7-mobile is-size-6-tablet is-size-5-desktop"
                  >
                    <thead>
                      <tr class="is-uppercase">
                        <!-- <td>#</td> -->
                        <td class="has-text-right">File Name</td>
                        <td class="has-text-right">
                          <abbr title="DRAM .data">.data (B)</abbr>
                        </td>
                        <td class="has-text-right">
                          <abbr title="DRAM .bss">.bss (B)</abbr>
                        </td>
                        <td class="has-text-right">IRAM (B)</td>
                        <td class="has-text-right">
                          <abbr title="Flash Code">code(B)</abbr>
                        </td>
                        <td class="has-text-right">
                          <abbr title="Flash Rodata">rodata (B)</abbr>
                        </td>
                        <td class="has-text-right">Total</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(fileInfo, fileName) in archiveInfo.files">
                        <!-- <td>{{count}}</td> -->
                        <td class="has-text-right">{{fileName}}</td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.data)}}
                        </td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.bss)}}
                        </td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.iram)}}
                        </td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.flash_text)}}
                        </td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.flash_rodata)}}
                        </td>
                        <td class="has-text-right">
                          {{convertToSpacedString(fileInfo.total)}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- End of Detailed View -->
        </div>
      </div>
      <!-- Pseudo non use element -->
      <div style="display: none;">
        <p v-for="file in filteredFiles">{{file}}</p>
      </div>
    </div>
  </body>
</html>
